import { deleteParkingLotRequest, reviseParkingLotRequest } from '@/apis/parking'
import { Button, Image, Modal, Popconfirm, Table, TablePaginationConfig, Tag, message, Form, Input, Radio, Cascader } from 'antd'
import React, { useEffect, useState } from 'react'
import { observer } from 'mobx-react-lite';

import "./style.scss"
import { storeAll } from '@/store'
import Upload from '@/components/upload'
import HeaderSearch from './components/headerSearch'
import { layout } from '@/utils/contants';
import { parkingType } from '@/store/parking';
import { carsTypes } from '@/store/cars';
import { ColumnsType } from 'antd/es/table';
import { searchCarRequest } from '@/apis/cars';

const { Column } = Table

const ParkingLot: React.FC = () => {
	const [currentParking, setCurrentParking] = useState<parkingType>()
	const [open, setOpen] = useState<boolean>(false)
	const [open1, setOpen1] = useState<boolean>(false)
	const [picture, setPicture] = useState<string>('')
	const [pageSize, setPageSize] = useState<number>(10)
	const [curCar, setCurCar] = useState<carsTypes[]>()
	const [form] = Form.useForm()
	const { parkingLotTypeStore: { parkingLotType }, parkingStore: { parking1, getParkingLot, options, setOptions } } = storeAll
	const columns: ColumnsType<carsTypes> = [
		{
			dataIndex: 'username',
			title: '车主'
		},
		{
			dataIndex: 'number',
			title: '车牌号',
			filterSearch: true,
		},
		{
			dataIndex: 'phone',
			title: '车主联系方式'
		},
		{
			dataIndex: 'type',
			title: '车辆类型'
		},
		{
			dataIndex: 'position',
			title: '位置',
		},
		{
			dataIndex: 'picture',
			title: '图片',
			render: (_, record) => (
				<Image src={record.picture} className="tableAvater"></Image>
			)
		}
	]

	useEffect(() => {
		setOptions(parking1, 0, currentParking?.id)
	}, [setOptions, parking1, currentParking])

	const pagination: TablePaginationConfig = {
		defaultCurrent: 1,
		pageSize,
		// total: parking.length || 0,
		onShowSizeChange: (num: number, size: number) => {
			setPageSize(size)
		}
	}

	//删除车位
	const deleteParking = (id: number) => {
		deleteParkingLotRequest(id).then((res: any) => {
			message.success(res.message)
			getParkingLot()
		})
	}

	const openModal = (record: parkingType) => {
		setOpen(true)
		setCurrentParking(record)
		form.setFieldsValue(record)
		setPicture(record.picture)
	}

	const closeModal = () => {
		form.resetFields()
		setOpen(false)
	}

	const getImgUrl = (url: string) => {
		setPicture(url)
	}

	const reviserParking = (value: parkingType) => {
		if (!picture) return message.warning('图片加载中')
		value.picture = picture
		value.id = currentParking?.id as number
		reviseParkingLotRequest(value).then((res: any) => {
			message.success(res.message)
			getParkingLot()
			closeModal()
		})
	}

	const checkCar = (record: parkingType) => {
		setOpen1(true)
		searchCarRequest(record.id).then((res: any) => {
			setCurCar(res.result)
		})
	}

	return <div className="parkingLotWrap">
		<HeaderSearch></HeaderSearch>
		<Table dataSource={parking1} pagination={pagination} rowKey={record => record.id}>
			<Column title="楼栋" dataIndex="building" key="building"></Column>
			<Column title="类型" dataIndex="type" key="type" render={(type: number) =>
				parkingLotType.find(item => item.id === type)?.notes
			}></Column>
			<Column title="位置" dataIndex="position" key="position"></Column>
			<Column title="状态" dataIndex="status" key="status" render={(status: number, record: parkingType) =>
				status === 1 ? <Tag color="#f50" onClick={() => checkCar(record)}>已经被占用</Tag> : <Tag color="#2db7f5">空闲</Tag>
			}></Column>
			<Column
				title="图片" dataIndex="picture" key="picture"
				render={(picture: string) => <Image className="parkingPicture" src={picture} alt=""></Image>}
			></Column>
			<Column title="操作" key="options" render={(_: any, record: parkingType) => <div className="actionWrap">
				<Button type="primary" danger disabled={record.status === 1}>
					{
						record.status === 1 ? '删除' :
							<Popconfirm
								title="Delete the task"
								description="你确定要删除此车位吗，删除后车位的所有信息都会被抹去"
								okText="确定"
								cancelText="取消"
								onConfirm={() => deleteParking(record.id)}
							>
								删除
							</Popconfirm>
					}
				</Button>
				<Button type="primary" onClick={() => openModal(record)}>
					修改
				</Button>
			</div>}></Column>
		</Table>
		<Modal title="修改车位" open={open} onCancel={closeModal} footer={null}>
			<Form
				initialValues={currentParking}
				onFinish={reviserParking}
				form={form}
				{...layout}
			>
				<Form.Item name={['building']} label="楼栋">
					<Input disabled />
				</Form.Item>
				<Form.Item name={['position']} label="位置">
					<Cascader options={options} disabled></Cascader>
				</Form.Item>
				<Form.Item name={['type']} label="类型">
					<Radio.Group disabled={currentParking?.status === 1}>
						{
							parkingLotType.map(item => (
								<Radio value={item.id} key={item.id}>{item.notes}</Radio>
							))
						}
					</Radio.Group>
				</Form.Item>
				<Form.Item name={['status']} label="状态">
					<Radio.Group disabled>
						<Radio value={0}>空闲</Radio>
						<Radio value={1}>已被占用</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item label="图片">
					<Upload src={picture} getImgUrl={getImgUrl}></Upload>
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
		<Modal title="占用的车辆" open={open1} onCancel={() => setOpen1(false)} footer={null} width={620}>
			{
				curCar?.length ? <Table dataSource={curCar} rowKey={(record) => record.id} columns={columns} pagination={false}>
				</Table> : <div className="regularParking">此车位是作为固定车位被占用</div>
			}
		</Modal>
	</div >
}

export default observer(ParkingLot)